<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>列表</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/yzl.css"/>
    <style>
    .active a{
      color: #9d0152;
    }
    .active{
      border-bottom: 2px solid #9d0152
    }
    </style>
</head>
<body>
<div id="blank" class="header" style="overflow: hidden;position:relative;">
    <div v-back.tapmode class="back "></div>
    <span class="title" >我的订单</span>
    <span tapmode onclick="showAdd()" style="position:absolute;right:10px;font-size:14px;">添加</span>
</div>
<div id="app" class="my_order_condition" style="top:60px;background:white">
    <ul>
        <li v-myclick="[0, changeState]" :class="{'active': 0 == state}">
            <a class="li-click ">全部</a>
        </li>
        <li v-myclick="[1, changeState]" :class="{'active': 1 == state}">
            <a class="li-click ">已付款</a>
        </li>
        <li v-myclick="[2, changeState]" :class="{'active': 2 == state}">
            <a class="li-click ">已收货</a>
        </li>
        <li v-myclick="[3, changeState]" :class="{'active': 3 == state}">
            <a class="li-click ">已失效</a>
        </li>
        <li v-myclick="[4, changeState]" :class="{'active': 4 == state}">
            <a class="li-click ">处理中</a>
        </li>
    </ul>
</div>
<div id="modal" class="userinfo-modal hide" onclick="hideShowAdd()" @touchmove.prevent tapmode>

</div>
<script src="../../script/api.js"></script>
<script src="../../script/vue.js"></script>
<script src="../../script/app.js"></script>
<script src="../../script/url.js"></script>
<script src="../../script/common.js"></script>
<script>
    var state;
    var vm;

    var modal = document.getElementById('modal');
    apiready = function () {
        setBSImg();
        new Vue({
            el:'#blank'
        });
        state = api.pageParam.state;

        vm = new Vue({
            el:'#app',
            data:{
                state:state,
            },
            methods:{
                changeState: function (index) {
                    showProgress();
                    this.state = index;
                    var data = {
                        member_id: getPrefs('member_id'),
                        state: this.state
                    };
                    var callback = function (ret) {
                        var orders = ret.content;
                        api.sendEvent({
                            name: 'loadOrders',
                            extra: {
                                orders:orders,
                                state:vm.state
                            }
                        });
                    };
                    pinet.post(URL.getMyOrders, data, callback);
                },
            }
        });
        api.openFrame({
            name: 'my_order_frame',
            url: 'my_order_frame.html',
            pageParam:{
                state:state
            },
            rect: {
                x: 0,
                y: 104,
                w: api.winWidth,
                h: 'auto'
            },
            bounces: true
        });

        api.parseTapmode();
        addListeners();
    };

    function showAdd() {
        api.sendEvent({
            name: 'showAdd',
        });
    }

    function hideShowAdd() {
        api.sendEvent({
            name: 'hideShowAdd',
        });
    }

    function addListeners() {
        api.addEventListener({
            name: 'showAdd'
        }, function () {
            modal.style.visibility = 'visible';
        });

        api.addEventListener({
            name: 'hideShowAdd'
        }, function () {
            modal.style.visibility = 'hidden';
        });

        api.addEventListener({
            name: 'viewappear'
        }, function () {
            onPageStart();
        });

        api.addEventListener({
            name: 'viewdisappear'
        }, function (ret, err) {
            onPageEnd();
        });

        api.addEventListener({
            name: 'keyback'
        }, function (ret, err) {
            onPageEnd();
            api.closeWin();
        });
    }
</script>
</body>
</html>
